<template>
    <div class="comp-help"
         :class="{'comp-help-success':helpType==='success'&&theme === 'white',
                'comp-help-info':helpType==='info'&&theme === 'white',
                'comp-help-info-gray':helpType==='infoGray'&&theme === 'white',
                'comp-help-warning':helpType==='warning'&&theme === 'white',
                'comp-help-error':helpType==='error'&&theme === 'white',
                'comp-help--dark':theme === 'dark'}">
        <i :class="{'icon-info':(helpType==='info'||helpType==='infoGray'),
                'icon-checkmark2':helpType==='success',
                'icon-notification':helpType==='warning',
                'icon-cancel-circle':helpType=='error'}" class="icon"></i>
        <slot name="comp-help-content" class="comp-help-content"></slot>

    </div>
</template>

<script type="text/babel">
    export default {
        data() {
            return {

            };
        },
        props: {
            helpType: {
                type: String,
                default: 'info'//info/success/warning/error/infoGray
            },
            theme:{
                type: String,
                default: 'white'
            }
        },
        created(){

        },
        methods: {

        }
    }
</script>

<style lang="sass" rel="stylesheet/scss">
    .comp-help {
        padding: 22px 16px;
        background-color: #fbfbfc;
        border-radius: 2px;
        color: #999;
        .icon{
            float: left;
            transform: translate(0,2px);
            font-size: 14px;
        }
        .comp-help-content{
            padding-left: 24px;
            word-wrap:break-word;
            >.title {
                font-size: 13px;
                color: #666;
                margin-bottom: 3px;
            }
            >.text {
                &:not(:last-child){
                    margin-bottom: 8px;
                }
            }
            .comp-help-content-text{
                margin-bottom: 8px;
            }
        }
        &--dark{
            background-color: #1d1f21;
            color:#666d71;
            .icon{
                color: #3b637c;
            }
            .comp-help-content{
                >.title {
                    color: #cccdcd;
                    margin-bottom: 8px;
                }
                >.text {
                    color: #95a4ae;
                }
                .comp-help-content-text{
                    margin-bottom: 8px;
                }
            }
        }


        &-success{
            background-color: #f3fbf1;
            .icon{
                color: #47ae27;
            }
            border: 1px solid rgba(71, 174, 39, 0.1);
        }
        &-info{
            background-color: #ebf9ff;
            .icon{
                color: #0084ff;
            }
            border: 1px solid rgba(0, 132, 255, 0.1);  ;
        }
        &-info-gray{
            .icon{
                color: #0084ff;
            }
            border: 0;
        }
        &-warning{
            background-color: #fff7e7;
            .icon{
                color: #ff6e0d;
            }
            border: 1px solid rgba(255, 110, 13, 0.1);
        }
        &-error{
            background-color: #ffefe7;
            .icon{
                color: #f9504b;
            }
            border: 1px solid rgba(249, 80, 75, 0.10);
        }
    }

</style>